<%@ page language="java" contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title><spring:message code="allShare"/></title>
    <meta id="viewport" name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <link href="<c:url value='/resource/css/main.css' />" type="text/css" rel="stylesheet">
    <link href="<c:url value='/resource/css/iconfont.css' />" type="text/css" rel="stylesheet">
</head>

<body>
<div class="container wj-share-container" id="share-container">
    <header class="module-topbar">
        <a class="fl" href="javascript:history.back();"><i class="iconfont">&#xe608;</i><spring:message code="back"/></a>
        <span><spring:message code="allShare"/></span>
    </header>
    <div id="wapper-pull" class="margin-topbar padding-container">
        <div class="module-shares">
        </div>
    </div>
</div>

<script type="text/javascript" src="${basePath}/resource/js/common/messages_${sessionScope.lang}.js"></script>
<script type="text/javascript" src="${basePath}/resource/js/share/jquery.min.js"></script>
<script type="text/javascript" src="${basePath}/resource/js/share/laytpl.js"></script>
<script type="text/javascript" src="${basePath}/resource/js/share/layer/layer.m.js"></script>
<script type="text/javascript" src="${basePath}/resource/js/share/swipeSlide.js"></script>
<script type="text/javascript" src="${basePath}/resource/js/share/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="${basePath}/resource/js/share/json2.js"></script>
<script type="text/javascript" src="${basePath}/resource/js/share/xpull.js"></script>
<script type="text/javascript" src="${basePath}/resource/js/share/share.js"></script>

<script id="tpl" type="text/html">
    {{# for(var i = 0, len = d.length; i < len; i++){ var share = d[i];}}
    <div class="share line-around  wj-line-around" id="{{ share.id }}" {{# if (share.type == '1'){ }}original="{{ share.original }}"{{# } }}>
        <jsp:include page="tpl/header.jsp" />
		<div class="wj-detail-box">
        	<jsp:include page="tpl/detail.jsp" />
        	<jsp:include page="tpl/interact.jsp" />
			<jsp:include page="tpl/interactDetail.jsp" />
		</div>
    </div>
    {{# } }}
</script>
<script>

	var feed;
    var feeds = <%=request.getAttribute("feeds")%>;
    var userId = <%=request.getAttribute("userId")%>;
    var offset = <%=request.getAttribute("offset")%>;
    var timestamp = '<%=request.getAttribute("timestamp")%>';
    var next = <%=request.getAttribute("next")%>;
    var isMore = true;

  /*  	laytpl(document.getElementById('tpl').innerHTML).render(feeds, function (html) {
        $('.module-shares').append(html).find('img.loading').lazyload({
            threshold : 200,
            effect: "fadeIn"
        });
    });  */ 
   	
   	function loadShares(feeds, clear) {
        laytpl(document.getElementById('tpl').innerHTML).render(feeds, function (html) {
            var shares = $(html);
            shares.find('img.loading').lazyload({
                threshold : 200,
                effect: "fadeIn"
            });

            if (clear) {
                $('.module-shares').empty();
            }
            shares.appendTo($('.module-shares'));
            $(shares).each(function() {
                feed.bindShare($(this));
            });
            isMore = true;
        });
    }

    function reload() {
    	var userToken = localStorage.getItem("userTonken");
    	var lang = localStorage.getItem("lang");
        Page.ajaxGetQuiet('/u/'+userId+'.do?userToken='+userToken+'&lang='+lang, null, function (response) {
            timestamp = response.data.timestamp;
            offset = response.data.offset;
            userId = response.data.userId;
            shareMessageTip();
            Page.resetPull();
            
            // 加载分享
            loadShares(response.data.feeds, true);
        });
    }
   	
   	Page.onMore(function () {
   		if(isMore){
	        if (next) {
	        	var userToken = localStorage.getItem("userTonken");
	        	var lang = localStorage.getItem("lang");
	        	isMore = false;
	            Page.ajaxGetQuiet('/u/'+userId+'/' + offset+".do?userToken="+userToken+'&lang='+lang, {timestamp: timestamp}, function (response) {
	                // console.log(response)
	                timestamp = response.data.timestamp;
	                offset = response.data.offset;
	                next = response.data.next;
	                userId = response.data.userId;
	                // 加载分享
	                loadShares(response.data.feeds);
	            });
	        }
   		}
    });

    $(function () {
    	
    	
//        Feed.create($('.module-shares'), Share.create($('.module-publisher')).bindPopstate());
		feed = Feed.create($('.module-shares'), Share.create($('.module-publisher')));
		loadShares(feeds);
        $('#wapper-pull').xpull({
            'pullThreshold': 50, // Pull threshold - amount in  pixels required to pull to enable release callback
            'callback': function () {
            }, // triggers after user pulls the content over pull threshold and releases
            'spinnerTimeout': 1000 // timeout in miliseconds after which the loading indicator stops spinning. If set to 0 - the loading will be indefinite
        });
    });
</script>

<jsp:include page="comment.jsp"/>
</body>

</html>
